<template>
  <el-dialog :visible.sync="isShow" width="1200px">
    <el-row>
      <el-col :span="24">
        <div class="row">
          <el-radio v-model="radioValue" label='1'>直接添加</el-radio>
          <el-radio v-model="radioValue" label='2'>使用筛选条件</el-radio>
        </div>
      </el-col>
      <el-col :span="24" style="margin-top: 20px;">
        <el-form :model="searchParams" ref="searchParams" :inline="true">
          <el-form-item label="商品分类：">
            <el-select v-model="searchParams.cate" placeholder="请选择" clearable>
              <el-option v-for="item in cateList" :key="item.id" :label="item.label" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标题">
            <el-input class="input" v-model="searchParams.title" maxlength='20' placeholder="请输入" clearable
              show-word-limit></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleSearch" type="primary" icon="el-icon-search"
              style="margin-left:40px">搜索</el-button>
          </el-form-item>
        </el-form>
        <div style="margin-bottom: 10px;color: red;" v-if="radioValue==2">已选择筛选条件：{{ itemFilter || '未选择' }}</div>
        <el-table :data="dataList" size='medium' ref="multipleTable" @selection-change="handleSelectionChange" border>
          <el-table-column type="selection" width="55" align='center' v-if="radioValue==1"></el-table-column>
          <el-table-column prop="id" label="id" width="50" show-overflow-tooltip></el-table-column>
          <el-table-column prop="cateModel.label" label="分类" show-overflow-tooltip></el-table-column>
          <el-table-column prop="title" label="标题" show-overflow-tooltip></el-table-column>
          <el-table-column prop="subTitle" label="副标题" show-overflow-tooltip></el-table-column>
        </el-table>
        <pagination style="background: #ffffff; height: 50px" v-show="totalSize > 0" :total="totalSize"
          :page.sync="page" :limit.sync="size" @pagination="getDataList" />
      </el-col>
    </el-row>
    <div style="margin-top: 20px;">
        <el-button type="primary" @click="confirm">确定</el-button>
        <el-button type="info" @click="close">取消</el-button>
      </div>
  </el-dialog>
</template>

<script>
import { findArticleList } from '@/api/system/article.js'
import { findDictList } from '@/api/system/dict.js'
export default {
  data() {
    return {
      page: 1,
      size: 10,
      isShow: false,
      sizeValue: '',
      totalSize: 0,
      dataList: [],
      cateList: [],
      searchParams: {},
      filter: {},
      itemFilter: '',
      radioValue: '1',
      multipleSelection: []
    }
  },
  created() {
    this.getDataList()
    this.findArticleCateList()
  },
  methods: {
    show(){
      this.isShow = true
    },
    close(){
      this.isShow = false
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSearch() {
      // this.searchParams = Object.assign(this.filter, searchParams)
      this.page = 1
      var keys = Object.keys(this.searchParams)
      var filter = ''
      for (var key of keys) {
        if (key == 'cate' && this.searchParams['cate']) {
          filter = filter + key + '=' + this.searchParams[key] + '&'
        }
        if (key == 'title' && this.searchParams['title']) {
          filter = filter + key + '=' + this.searchParams[key] + '&'
        }
      }
      this.itemFilter = filter.substring(0, filter.length - 1)
      this.getDataList()
    },
    // 获取列表数据
    getDataList() {
      this.searchParams.page = this.page
      if(this.sizeValue){
        this.searchParams.size = this.sizeValue
      }else{
        this.searchParams.size = this.size
      }
      findArticleList(this.searchParams).then(res => {
        if (res.data.code == 10000) {
          this.totalSize = res.data.data.total_count
          this.dataList = res.data.data.list
        }
      });
    },
    findArticleCateList() {
      findDictList({
        dictTypeKey: 'articleCate'
      }).then(res => {
        if (res.data.code == 10000) {
          this.cateList = res.data.data.list
        }
      });
    },
    confirm(){
      var query = {}
      if(this.radioValue == '1'){
        query.dataType = '1'
        query.url = 'system/articleForP/getArticlesByIds/'
        query.routeName = 'articleDetail'
        query.modal = 'push'
        query.ids = this.multipleSelection.map(item => item.id)
      }else if(this.radioValue == '2'){
        if(!this.itemFilter){
          this.$message.error('请选择筛选条件');
          return
        }
        query.dataType = '2'
        query.url = 'system/articleForP/'
        query.routeName = 'articleDetail'
        query.modal = 'push'
        query = Object.assign(query, this.tools.paramsToObj(this.itemFilter))
      }
      this.$emit('handleSelect', JSON.stringify(query))
      this.isShow = false
    },
  },
}
</script>
<style scoped lang='scss'></style>
